<template>
	<view class="bg">
		<!-- 搜索 -->

		<!-- <view class="img">
                <image @tap="search" src="/static/images/search.png"></image>
            </view>
            <view class="input">
                <input placeholder="请输入物品名，地名" @input="searchText" type="text" />
            </view> -->
		<uni-search-bar class="search-bar" placeholder="请输入物品名或地名" v-model="text" bgColor="#EEEEEE" @confirm="search" />

		<!-- 向上的图标 -->
		<view class="side">
			<view @tap="goTop" class="go">
				<image src="/static/images/top.png"></image>
			</view>
			<navigator url="/currents/home/home">
				<view class="add">+</view>
			</navigator>
		</view>

		<!-- 失物招领与寻物启事 -->
		<view class="title">
			<view @tap="changeCategory" data-category="0" class="lose">
				寻失主
				<view :class="category == false ? 'line' : ''"></view>
			</view>
			<view @tap="changeCategory" data-category="1" class="seek">
				寻失物
				<view :class="category == true ? 'line' : ''"></view>
			</view>
		</view>

		<!-- 循环清单
    <view class="list">
      <view bindtap="thing" class="{{thing[index].str1==nowThing?'item1':'item'}}" data-index="{{index}}" wx:for="{{thing}}">
        {{thing[index].str}}
        </view>
    </view> -->
		<!-- 物品种类 -->
		<view class="tag-list">
			<!-- 比较多的几个 -->
			<view :class="index == tagindex ? 'tag1' : 'tag'" :data-index="index" @tap="changeTag"
				v-for="(item, index) in tags" :key="index">
				{{ tags[index] }}
			</view>

			<!-- 可供选择的标签 -->
			<picker :class="tagindex == -1 ? 'tag1' : 'tag'" @change="changePickTag" mode="selector"
				:value="tagpickindex" :range="picktags" header-text="物品种类">
				{{ picktags[tagpickindex] }}
			</picker>
		</view>



		<view class="loseContent" slot="content">
			<view @tap="to_item_info" :data-index="index" class="item" v-for="(item, index) in items" :key="index">
				<view class="img">
					<image v-if="item.images!=null &&item.images.length>0 "
						:src="item.images[0]"></image>
					<image v-else src="/static/images/noImg.png"></image>
				</view>

				<view class="list">
					<view class="title">
						{{ item.title }}
					</view>
					<!-- 是否认领 -->
					<!-- <view class="button">{{lose[index].upshot}}</view> -->
				</view>

				<view class="nowThing">类型：{{ item.tag }}</view>

				<view class="user" style="display: flex">
					<view class="imageUser">
						<image :src="item.userVO.headImage"></image>
					</view>
					<view class="username">{{ item.userVO.nickname }}</view>
					<view class="icon">
						<image src="/static/images/xingqiu.png"></image>
					</view>
				</view>
			</view>
			<uni-load-more class="load-more" :status="status" iconType="circle" />
		</view>




	</view>

</template>

<script>
	import UNI_APP from '@/.env.js'
	const baseUrl = UNI_APP.BASE_URL
	export default {
		data() {
			return {
				status: 'more',
				tags: ['全部', '耳机', '书本', '水杯', '证件'],
				picktags: ['其他', '手机', '钥匙', '钱包', '相机', '衣服', '首饰'],
				hasData: true,
				//是否查完了数据,
				loading: false,
				items: [],
				category: false,
				// now: app.globalData.formattedDate,
				tagindex: 0,
				//初始化为-1
				tagpickindex: 0,
				text: '',
				//查询文本
				current: 1,
				//查询页数
				size: 20,
				//每页查询数量,
				hasData: true,
				//是否查完了数据,
				loading: false,
				pulldowning: false
			};
		},
		onLoad: async function() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.refresh().then(() => {
				this.loadData();
			});
			setTimeout(() => {
			        //结束下拉刷新
			      uni.stopPullDownRefresh ();
			}, 1000);

		},
		
		onReachBottom: async function() {
			try {
				if (this.hasData == false || this.loading == true) {
				
					return false;
				}
				this.current++
				this.loadData();
			} catch (error) {
				uni.showToast({
					title: '刷新失败，请稍后再试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		methods: {
			
			async refresh() {
				this.current = 1,
					this.tagindex = 0,
					//初始化为0
					this.tagpickindex = 0,
					//是否查完了数据,
					this.hasData = true,
					this.loading = false
					this.items = []
			},
			//加载数据
			async loadData() {
				this.loading = true
				this.status = 'loding'
				var {
					current,
					size,
					date,
					text,
					category,
					tagindex,
					tagpickindex,
					tags,
					picktags,
					items
				} = this;
				var tag = null;
				if (tagindex == 0) tag = null;
				else if (tagindex != -1) tag = tags[tagindex];
				else if (tagpickindex != 0) {
					tag = picktags[tagpickindex];
				}
				const itemHomeDTO = {
					current: current,
					size: size,
					category: category,
					text: text,
					tag: tag
				};
				if (tag == null) {
					delete itemHomeDTO.tag;
				}
				if (text == null) {
					delete itemHomeDTO.text;
				}
				// console.log(itemHomeDTO);
				this.$http({
						url: baseUrl + '/getHomeItem',
						data: itemHomeDTO,
						method: 'POST'
					})
					.then(data => {
						console.log(data);
						this.items = [...this.items,...data.records]
						console.log(this.items)
						if (this.items.length >= data.total) {
							this.hasData = false
							this.status = 'no-more'
						} else {
							this.status = 'more'
							this.hasData = true
						}
					})
					.catch((err) => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
						this.status = 'more'
					})
					.finally(() => {
						this.loading = false
					});

			},

			changeCategory(e) {
				return new Promise((resolve, reject) => {
					this.category = e.target.dataset.category == 0 ? false : true,
						this.current = 1,
						this.items = []
					this.loadData();
				});
			},

			// 选择标签
			async changeTag(e) {
				// console.log(e);
				var tags = this.tags;
				var index = e.currentTarget.dataset.index;
				var tag = tags[index];
				if (this.tagindex != index) {
					this.tagindex = index,
						this.tagpickindex = 0,
						this.current = 1,
						this.items = []
					this.loadData();
				}
			},

			//选择其他里的标签
			changePickTag(e) {
				// console.log(e);
				var tagpickindex = e.detail.value;
				var picktags = this.picktags;
				var tag = picktags[tagpickindex];
				if (this.tagpickindex != tagpickindex) {

					this.tagpickindex = tagpickindex,
						this.item.tag = tag,
						this.current = 1,
						this.tagindex = -1,
						this.items = []
					this.loadData();

				}
			},



			search(event) {
				this.current = 1,
				this.items = []
				this.loadData();
			},

			to_item_info(e) {
				// console.log(e);
				var index = e.currentTarget.dataset.index;
				var item = this.items[index];
				// console.log('index:', index);
				// console.log('item:', item);
				uni.navigateTo({
					url: '/pages/item-info/item-info',
					routeType: 'routeType',
					success: (result) => {
						uni.$emit('acceptdata', {
							data: {
								item: item,
								user: item.userVO
							}
						});
					},
					fail: (res) => {
						uni.showToast({
							title: '打开页面失败'
						});
					},
					complete: (res) => {}
				});
			}


		}
	};
</script>
<style>
	current {
		height: 100%;
		width: 100%;
		padding: 0 0;
	}

	/* 侧导航 */
	.side {
		background-color: #fff;
		width: 100rpx;
		height: 200rpx;
		border-radius: 50rpx;
		position: fixed;
		top: 1100rpx;
		left: 630rpx;
	}

	.side .go {
		margin-left: 13rpx;
		margin-top: 10rpx;
	}

	.side .go image {
		width: 80rpx;
		height: 80rpx;
	}

	.side .add {
		font-size: 50rpx;
		background-color: #ffd23c;
		width: 90rpx;
		border-radius: 50%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 0rpx;
		font-weight: bold;
		color: #fff;
	}

	/* 搜索框 */
	.search-bar {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		margin-top: 35rpx;
		border-radius: 60rpx;
	}

	.tag-list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.tag {
		background-color: #e2e2e250;
		width: 100rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #252525;
	}

	.tag1 {
		background-color: #ffeb37;
		width: 100rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #252525;
	}

	/* 标签选择 */
	.list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.list .item {
		background-color: #e2e2e250;
		width: 100rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #252525;
	}

	.list .item1 {
		background-color: #ffd23c;
		width: 100rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #252525;
	}

	.zjff {
		background-color: #ffd23c;
		height: 60rpx;
		width: 80%;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50rpx;
		margin-top: 25rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	/* 主标题 */
	.title {
		display: flex;
	}

	.title .line {
		background-color: #ffd23c;
		height: 14rpx;
		border-radius: 35rpx;
		width: 80%;
	}

	.title .lose {
		margin: 30rpx;
		font-size: 38rpx;
	}

	.title .seek {
		margin: 30rpx;
		font-size: 38rpx;
	}

	/* 主标题结束 */

	.showButton {
		width: 180rpx;
		height: 80rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 60rpx;
		transition: 0.5s;
	}

	.showButton .button {
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
		background-color: #fff;
		margin-top: 9rpx;
		transition: 0.5s;
	}

	/* .showButton .button:hover .showButton{
  background-color: rgb(99, 255, 94);
}
.showButton .button:hover{
  margin-left: 110rpx;
} */



	.loseContent {
		position: absolute;
		width: 100%;

	}

	.loseContent .item {
		border-radius: 30rpx;
		float: left;
		background-color: #fff;
		width: 300rpx;
		padding: 20rpx;
		margin-left: 25rpx;
		margin-top: 25rpx;
		margin-bottom: 35rpx;
	}

	.loseContent .item .img {
		margin-left: 10rpx;
	}

	.loseContent .item .img image {
		height: 280rpx;
		width: 280rpx;
		border-radius: 30rpx;
	}

	.loseContent .item .title {
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-weight: bold;
		width: 250rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.loseContent .item .button {
		background-color: #ffd23c;
		border-radius: 30rpx;
		padding: 12rpx;
		font-size: 24rpx;
		text-align: center;
		width: 100rpx;
		margin-top: 5rpx;
	}

	.loseContent .item .nowThing {
		color: gray;
		margin-left: 15rpx;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	/* .loseContent .content .imageUser image{
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  margin-top: 20rpx;
  margin-left: 10rpx;
  border: 5rpx gray solid;
} */

	.loseContent .item .imageUser {
		width: 25%;
	}

	.loseContent .item .username {
		width: 50%;
		margin-top: 30rpx;
		height: 60rpx;
		margin-left: 15rpx;
		overflow: hidden;
	}

	.loseContent .item .icon {
		width: 25%;
		height: 25%;
	}

	.loseContent .item .imageUser image {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-left: 10rpx;
		border: 5rpx gray solid;
	}

	.loseContent .item .icon image {
		width: 70rpx;
		height: 70rpx;
		margin-top: -5rpx;
	}

	.load-more {
		float: left;
		position: absolute;
		bottom: 10rpx;
		left: 25%;
		width: 50%;
		height: 20rpx;
	}
</style>